<template>
  <div class="page iframe">
    <div class="scroll-view">
      <customHeader :middleTitle="title" @leftCallBack="goBack"></customHeader>
      <div class="page-body">
        <img class="imgSrc" :src="$route.query.imgSrc" v-if="$route.query.imgSrc">
        <iframe v-else
          id="frame"
          v-once
          :src="url"
          frameborder="0"
          @load="setWidth"
          height="100%"
          scrolling="yes"
        ></iframe>
      </div>
    </div>
  </div>
</template>

<script>
import customHeader from "@/components/header/header";
import jsBridge from "@/tools/jsBridge";

export default {
  name: "iframe",
  data() {
    return {
      title: "",
      url: "",
      curLength:0,
    };
  },
  methods: {
    goBack() {
      if(this.$route.query.close) {
        jsBridge.closeWindow();
        return;
      }
      //let backStep = this.$route.query.backStep ? Number(this.$route.query.backStep) : -1;
      let backStep=-1-(window.history.length-this.curLength);
      this.$router.go(backStep);
    },
    setWidth() {
      const w = document.documentElement.clientWidth;
      document.getElementById('frame').setAttribute("width", w);
    }
  },
  created() {
    this.title = this.$route.query.title;
    this.url = this.$route.query.url;
    this.curLength=window.history.length;
    let ua = navigator.userAgent.toLowerCase();
    if (ua.indexOf("android") == -1) {
      document.documentElement.className = document.documentElement.className.replace('remove-status-bar', '');
    }
  },
  mounted() {
    !this.$route.query.imgSrc && this.setWidth();
    setTimeout(() => {
      window.AppUtil.call(window.AppUtil.APIS.SET_BACK_OPTION, {
        control: false
      });
    }, 200);

  },
  components: {
    customHeader
  }
};
</script>
<style lang='scss' scoped>
@import "iframe";
</style>
